/**
 * 留言板（react 组件形式）
 * 需求：
 * 板块一：添加留言
 *   1. 输入框
 *   2. 提交按钮
 * 板块二：显示留言列表
 *   清空按钮
 *   留言列表项
 *     1. 留言者
 *     2. 留言内容
 *     3. 留言时间
 *     4. 删除按钮
 * 逻辑要求：
 *  1. 输入框：输入内容
 *  2. 提交按钮：提交留言
 *  3. 清空按钮：清空留言
 *  4. 留言列表项：显示留言列表项
 *  5. 删除按钮：删除留言
 * 提示：
 *   输入框使用 tdesign-react 提供的 Input 组件, 导入方式为 import { Input } from 'tdesign-react'
 *   按钮使用 tdesign-react 提供的 Button 组件, 导入方式为 import { Button } from 'tdesign-react'
 *   留言列表使用 tdesign-react 提供的 List 组件, 导入方式为 import { List } from 'tdesign-react'
 *   留言列表项使用 tdesign-react 提供的 ListItem 组件, 导入方式为 const { ListItem } = List
 *   时间使用 new Date().toLocaleString()
 *
 * 提示：
 *   当前的 NoteBoard 组件没有展示到页面上，需要模仿 NineNineTable 组件展示到页面上
 *
 * 思路：
 */

import { useState, useRef } from 'react'
import NoteList from './components/NoteList'
import AddNote from './components/AddNote'
import './index.less'

const NoteBoard = () => {

  const [currentAuthor, setCurrentAuthor] = useState('')

  const listRef = useRef(null)

  const onAuthorChange = (userName: string) => {
    setCurrentAuthor(userName)
  }

  const onAddSuccess = () => {
    // console.log(listRef.current)
    listRef.current && (listRef.current as any).refreshList()
  }

  return <div className='note-board'>
    <AddNote onAddSuccess={onAddSuccess} onAuthorChange={onAuthorChange} />
    <NoteList ref={listRef} author={currentAuthor} />
  </div>

}

export default NoteBoard
